<template>
<div class="header">
<div class="header-left">
    <div class="iconfont back-icon">&#xe624;</div>
</div>
<div class="header-input">
    <span class="iconfont">&#xe632;</span>
    输入城市/景点/游玩主题</div>
    <router-link to="/city">
<div class="header-right">    
    {{this.city}}
    <span class="iconfont arrow-icon">&#xe636;</span>
    </div>
    </router-link>
</div>
   
</template>

<script>

export default {
    name: 'HomeHeader',
    props: {
        city: String
    }
}
</script>

<style lang="stylus" scoped>

//  @import '../../../assets/styles/varibles.styl'
 @import '~styles/varibles.styl'
.header 
    display:flex
    line-height :$headerHeight
    background: $bgColor
    color: #fff
    .header-left
        width: .64rem
        float: left
        .back-icon
            text-align: center
            font-size: 0.4rem
    .header-input
        flex: 1
        height: 0.62rem
        line-height: 0.62rem
        margin-top: 0.12rem
        margin-left: 0.2rem
        padding-left:0.2rem
        background: #fff
        border-radius: .1rem
        color: #ccc
        text-align: left
    .header-right
        width: 1.24rem
        float: right
        color:#fff
        .arrow-icon
            font-size: .24rem

       text-align: center
    </style>